<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>员工列表</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/formSelects-v4.css" media="all ">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
    <style>
        .layui-form-item{
            margin-bottom:0px;
        }
    </style>
</head>
<body>
    <h2>员工列表</h2>
    <hr>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input id="username" type="text" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline" style="width: 300px">
                    <select id="id" class="layui-input">
                        <option value="-1">请选择</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px">
                    <button type="button" class="layui-btn" onclick="SearchData();"><i class="layui-icon layui-icon-search"></i>查询</button>
                </div>
            </div>
        </div>
    </form>
    <div class="layui-fluid">
        <table id="userTable" lay-filter="userTable"></table>
    </div>
<script>
    layui.use(["table","form"],function () {
        var table=layui.table;
        //渲染表格
        table.render({
            elem:'#userTable',
            url:'${path}/User/list',
            page:true,
            toolbar:'#toolbarDemo',
            cols:[[
                {type:'checkbox'},
                {field:'id',title:'ID'},
                {field:'username',title:'姓名'},
                {field:'roleString',width:88,title:'所属角色'},
                {field:'phone',title:'手机号'},
                {field:'sex',title:'性别'},
                {field:'address',title:'住址'},
                {field:'available',title:'是否可用',templet:'#lockedTem'},
                {toolbar:'#barDemo',title:'操作'}
            ]]

        })

        //监听工具栏事件
        table.on('toolbar(userTable)',function (obj) {
            var e=obj.event;
            var data=obj.data;
            switch (e) {
                case "add":
                    $.get("${path}/User/addform",function (str) {
                        layer.open({
                            type:1,
                            title:'添加用户',
                            area:'700px',
                            content:str,
                            skin:'layui-layer-molv',
                            btn:['确定','取消'],
                            yes:function (index) {
                                console.log(data)
                                $("#userid").val($("#roles_add").val());
                                var params=$("#add_user_form").serialize();
                                console.log(params)
                                $.post("${path}/User/add",params,function () {
                                    layer.close(index);
                                    table.reload("userTable");
                                })
                            }
                        })
                    })
                    break;
                case "batchDelete":
                    var rows=table.checkStatus("userTable");
                    var data=rows.data;
                    if (data.length==0){
                        layer.msg("请选择要删除的数据行",function () {})
                        return;

                    }
                    layer.confirm('确定要删除所选的数据行吗?',{icon:5,title:'友情提示'},function (index) {
                        var params="";
                        for (let user of data){
                            params+="ids="+user.id+"&";
                        }
                        $.post('${path}/User/batchDelete',params,function () {
                            layer.close(index);
                            table.reload("userTable");
                        })
                    })

            }
        })
        //监听行工具
        table.on("tool(userTable)",function (obj) {
            var data=obj.data;
            console.log(data)
            if (obj.event=='edit'){
                $.get("${path}/User/updateform",function (str) {
                    layer.open({
                        type:1,
                        title:'修改用户',
                        content: str,
                        area:'700px',
                        skin: 'layui-layer-molv',
                        btn:['确定','取消'],
                        success:function () {
                            $.get("${path}/User/view",{id:data.id},function () {
                                //显示数据
                                layui.form.val('userForm',data);
                                // alert(data.password)
                                 $("#roleIds").val(data.roles[0].id);
                                layui.form.render();
                            })
                        },
                        yes:function (index) {
                            $("#roleid").val($("#roleIds").val())
                            var params=$("#update_user_form").serialize();
                            console.log(params)
                            $.post("${path}/User/update",params,function () {
                                layer.close(index);
                                table.reload("userTable");
                            })
                        }
                    })
                })
            } 
        })
    })

    $.get("${path}/User/search",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#id");
            opt.text(this.rolename).val(this.id);
        })
    })

    function SearchData() {

        layui.table.reload("userTable",{
            page:{
                curr:1
            },
            where:{
                "username":$("#username").val(),
                "id":$("#id").val()
            }
        })
    }
</script>
    <script type="text/html" id="lockedTem">
        <input type="checkbox" readonly title="可用" {{d.available==1 ? 'checked' :''}}>
    </script>

    <script type="text/html" id="barDemo">
        <a href="javascript:void (0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>

    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </div>
    </script>
</body>
</html>
